<template>
  <div class="personal">
    <van-nav-bar
      title="收藏歌单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="zl">
      <div class="datou">
        <div class="tou">
          <div class="datou_l">
            <van-image class="img" round :src="prof.avatarUrl" />
          </div>
          <div class="datou_r">
            <div class="three">
              <van-row type="flex" class="nam">
                <van-col class="num" span="8">{{ followeds.length }}</van-col>
                <van-col class="num" span="8">{{ follows.length }}</van-col>
                <van-col class="num" span="8">{{ profe.level }}</van-col>
              </van-row>
              <van-row type="flex" class="nam">
                <van-col class="num" span="8">粉丝</van-col>
                <van-col class="num" span="8">关注</van-col>
                <van-col class="num" span="8">等级</van-col>
              </van-row>
            </div>
            <van-button round block type="info" plain color="red"
              >编辑我的信息</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="mylike" @click="mylove(userlist.userId)">
      <div class="img">
        <img
          src="http://p2.music.126.net/Lpqzy8CaDtpUUCMZhwjZlA==/109951166583316486.jpg"
          alt=""
        />
      </div>
      <div class="lmylike">
        <p>我喜欢的音乐</p>
        <span>{{ mindlist.length }}首</span>
        <div class="mind"><van-icon name="like-o" />心动模式</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

import { getusermsgAPI } from "../../api/mine";
export default {
  data() {
    return {
      prof: [],
      profe: [],
      follows: [],
      followeds: [],
      playlist: [],

      mindlist: [],
      userlist: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取登录状态
    async getdetail() {
      axios.get("/login/status", { withCredentials: true }).then((res) => {
        this.prof = res.data.data.profile;
        // console.log(this.prof);
        // this.getfollows();
        // this.getfolloweds();
        // this.getplaylist();
      });
    },
    //获取等级信息
    async getacc() {
      axios.get("/user/level", { withCredentials: true }).then((res) => {
        this.profe = res.data.data;
      });
    },
    //获取关注信息
    async getfollows() {
      axios
        .get(`/user/follows?uid=${this.prof.userId}`, { withCredentials: true })
        .then((res) => {
          this.follows = res.data.follow;
        });
    },
    //获取粉丝信息
    async getfolloweds() {
      axios
        .get(`/user/followeds?uid=${this.prof.userId}`, {
          withCredentials: true,
        })
        .then((res) => {
          this.followeds = res.data.followeds;
        });
    },
    //获取歌单信息
    async getusermsg() {
      const result = await getusermsgAPI();
      console.log(result, 888);
    },
    afterRead(file) {
      console.log(file);
      this.imgUrl = file.content;
    },
  },
  created() {
    this.getdetail();
    // this.getacc();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.datou {
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0px 2px 15px 0px #888888;
}
.van-button {
  width: 240px;
  margin: 20px auto;
}
.three {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  text-align: center;
}
.tou {
  display: flex;
  padding: 30px 5px;
}
.tou .img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.mylike img {
  width: 100px;
}
.mylike {
  display: flex;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #eee;
  background-color: #eee;
}
.mylike .lmylike {
  padding-left: 10px;
}
/* .imgurl {
  height: 100px;
  width: 100px;
  margin-left: 10px;
} */
</style>
